<template>
  <div class="app-container rebate-rules">
    <el-row class="header-wrap" justify="space-between" align="middle">
      <div>{{ route.query.channelName }}</div>
      <el-button @click="back">返回上一页</el-button>
    </el-row>
    <el-form class="alone-business" :model="queryData" ref="queryDataRef" :inline="true" label-width="68px">
      <el-form-item label="商家名称" prop="customerName">
        <el-input v-model="queryData.customerName" placeholder="请输入姓名或者手机号" clearable style="width: 200px" />
      </el-form-item>
      <el-form-item label="客户来源" prop="customerSource">
        <el-select v-model="queryData.customerSource" placeholder="请选择" clearable style="width: 200px">
          <el-option :value="1" label="自主开拓"></el-option>
          <el-option :value="2" label="下级渠道开拓"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道名称" prop="channelName">
        <el-input v-model="queryData.channelName" placeholder="请输入" clearable style="width: 200px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchData">查询</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button type="info" plain :loading="downLoading" @click="downExport">导出</el-button>
    </el-row>
    <el-table v-loading="tableLoading" :data="tableData" highlight-current-row style="width: 100%; margin-top: 20px">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column property="customerName" label="商家名称" width="250" />
      <el-table-column property="commissionAmount" label="累计返佣获利" />
      <el-table-column property="joinTime" label="入驻时间" />
      <el-table-column property="customerSourceStr" label="客户来源" />
      <el-table-column property="devChannelName" label="开拓渠道名称" width="200" />
    </el-table>
    <pagination :total="listTotal" v-model:page="queryData.current" v-model:limit="queryData.size" @pagination="getTable" />
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import { customerPage, customerExport } from "@/api/system/rebateRules/channel/customer";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

// 返回上一页
const back = () => {
  router.go(-1);
};

// 搜索条件
const queryData = ref({
  customerName: "",
  customerSource: "",
  channelName: "",
  current: 1,
  size: 10
});

// 表格总数
const listTotal = ref(0);

// 查询
const searchData = () => {
  getTable();
};

// 搜索重置
const reset = () => {
  queryData.value = {
    customerName: "",
    customerSource: "",
    channelName: "",
    current: 1,
    size: 10
  };
  getTable();
};

// 表格数据
const tableData = ref([]);
const tableLoading = ref(false);

// 获取表格数据
const getTable = () => {
  tableLoading.value = true;
  customerPage({ ...queryData.value, ...{ channelTenantId: route.query.channelTenantId } }).then(res => {
    tableData.value = res.data.list;
    listTotal.value = res.data.total;
    tableLoading.value = false;
  });
};

const downLoading = ref(false);
/** 导出按钮操作 */
const downExport = () => {
  downLoading.value = true;
  customerExport({ ...queryData.value, ...{ channelTenantId: route.query.channelTenantId } })
    .then(res => {
      proxy.getFileDownload(res, `客户管理${new Date().getTime()}.xlsx`);
    })
    .finally(() => {
      downLoading.value = false;
    });
};

onMounted(() => {
  getTable();
});
</script>
<style lang="scss" scoped>
.header-wrap {
  border-bottom: 1px solid #e1effe;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
</style>
